<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
    <link rel="stylesheet" href="../layui/css/public.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-btn-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>查询条件</legend>
    </fieldset>
</div>
    <form class="layui-form" method="post" id="searchFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">搜素条件:</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="请输入车牌号" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="请输入颜色" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="请输入价格" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="请输入名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询
                </button>
                <button type="reset" class="layui-btn layui-btn-warm  layui-icon layui-icon-refresh">重置</button>
            </div>
        </div>
    </form>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="writeExcel">导出Excel表格</button>
        <button class="layui-btn layui-btn-sm" lay-event="getExcel">下载模板</button>
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon layui-btn-sm">&#xe67c;</i>导入Excel
        </button>
    </div>
</script>

<script type="application/javascript">
    var date=renderTime(json.userBirthdate);
    function renderTime(date){

    }
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script src="../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'此处填入自己的controller路径'/*tpa=https://www.layuiweb.com/test/table/demo1.json*/
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '可租车辆信息'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'carnumber', title:'车牌号', width:80, fixed: 'left', unresize: true, sort: true}
                ,{field:'cartype', title:'型号', width:120, edit: 'text'}
                ,{field:'color', title:'颜色', width:150, edit: 'text'}
                ,{field:'price', title:'车辆价格', width:80, edit: 'text', sort: true}
                ,{field:'rentprice', title:'日租金', width:100}
                ,{field:'deposit', title:'押金',width:80}
                ,{field:'isrenting', title:'当前状态', width:80, sort: true}
                ,{field:'description', title:'车辆名称', width:120}
                ,{field:'createtime', title:'出厂日期', width:100,templet:"<div>{{ layui.util.toDateString(d.createtime,'yyyy-MM-dd' )}}</div>"}
                ,{field:'carimg', title:'车辆图片', width:120,templet: "<div><img style='height: 40px;width: 40px;' src='{{d.userImage}}'></div>"}
            ]]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limit:3
                ,limits:[1,3,5]
                ,groups: 3 //只显示 3 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
            }
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    //设置一个数组
                    var ids='';
                    //通过for循环来获得需要删除的id
                    for (var i = 0; i < data.length; i++) {
                        ids+="&ids="+data[i].id;
                    }
                    //使用ajax将获得数据传向指定的路径
                    $.get("此处写后端删除的路径",ids,
                        function (backData){
                            //获的后端传入的数据
                            if(backData!='判断条件'){
                                //刷新当前界面
                                table.reload("test",{})
                            }else{
                                alert("删除失败");
                            }
                        });
                    break;
                case 'writeExcel':
                    var data = checkStatus.data;
                    var ids ='';
                    for(var i=0;i<data.length;i++){
                        ids+="&ids="+data[i].id;
                    }
                    $.get(
                        "user/selectById",ids,
                        function (backData){
                            if("success"){
                                alert("导出成功")
                                table.reload("test",{})
                            }else{
                                alert("导出失败")
                            }
                        });
                    break;
                case 'getExcel':
                    location.href="此处写自己模板的路径";
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                    $.get(
                        //通过data.id的方式来获取需要删除的id，并使用ajax的方式将其传入后端
                        "此处写单个删除的路径，根据车牌号来删除"+ data.carnumber,
                        function (backData){
                            if("此处跟自己后端传过来的数据一致"==backData){
                                alert("删除成功");
                                //删除成功后刷新当前页面
                                table.reload("test",{});
                            }else{
                                alert("删除失败")
                                //删除失败后同样刷新当前网页
                                table.reload("test",{});
                            }
                        });
                });

            } else if(obj.event === 'edit'){
                queryOne(data);//将数据渲染到修改页面
            }
        });
    });
</script>
<script>
    function queryOne(data){
        layer.open({
            title:['修改用户'],
            type: 1,
            content:$("#updateUser").html(),
            area:['800px','650px'],
            btn:['提交','取消'],
            success:function (){
                /*车牌号*/
                $("#carnumber").val(data.carnumber);
                /*车辆类型*/
                $("#cartype").val(data.cartype);
                /*车辆颜色*/
                $("#color").val(data.color);
                /*车辆价格*/
                $("#price").val(data.price);
                /*日租金*/
                $("#rentprice").val(data.rentprice);
                /*押金*/
                $("#deposit").val(data.deposit);
                /*当前状态*/
                if ("0" == data.isrenting){
                    $("#isrenting").append("<option value='0' selected>是</option><option value='1'>否</option>")
                }else {
                    $("#isrenting").append("<option value='0'>是</option><option value='1' selected>否</option>")
                }
                /*车辆名称*/
                $("#description").val(data.description);
                /*出场时间*/
                $("#carimg").val(layui.util.toDateString(data.carimg,'yyyy-MM-dd'));


                layui.form.render();
            },
            yes: function (index,layero) {
                var table = layui.table;
                $.ajax({
                    type: "POST",
                    url: "此处填controller的路径",
                    data: $("#updateUserForm").serialize(),
                    success: function (msg) {
                        layer.close(index, function(){
                            table.reload("test",{});//刷新当前页面
                        });
                    }
                });
            },
            btn2: function () {
                alert("已取消")
            }
        });
    }
</script>

<script type="text/html" id="updateUser">
    <form id="updateUserForm" class="layui-form">
        <!--隐藏域-->
        <input type="hidden" id="carnumber" name="carnumber">

        <div class="layui-form-item">
            <label class="layui-form-label">车辆类型：</label>
            <div class="layui-input-block">
                <input id="cartype" type="text" name="cartype" lay-verify="required" lay-reqtext="车辆类型是必填项，岂能为空？" placeholder="请输入车辆类型" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">登录密码：</label>
            <div class="layui-input-block">
                <input id="userPwd" type="text" name="userPwd" lay-verify="required" lay-reqtext="密码是必填项，岂能为空？" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">颜色：</label>
            <div class="layui-input-block">
                <input id="color" type="text" name="color" lay-verify="title" autocomplete="off" placeholder="请输入修改的颜色" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">汽车价格：</label>
                <div class="layui-input-block">
                    <input id="price" type="text" name="price" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">是否可租：</label>
                <div class="layui-input-block">
                    <select id="isrenting" name="isrenting"></select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">日租金：</label>
                <div class="layui-input-inline">
                    <input id="rentprice" type="text" name="rentprice" lay-verify="identity" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">押金：</label>text
                <div class="layui-input-inline">
                    <input id="deposit" type="text" name="deposit" lay-verify="identity" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">车辆名称：</label>
                <div class="layui-input-inline">
                    <input type="text" name="description" id="description" lay-verify="identity" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">出厂日期：</label>
            <div class="layui-input-block">
                <input id="createtime" type="date" name="createtime"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</script>
</body>

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#userBirthDate' //指定元素
        });
    });
</script>

<script>
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: 'user/readExcel' //上传接口
            ,accept:'file'
            ,done: function(res){
                if(res.msg == "success"){
                    //上传完毕回调
                    location.reload();
                    //table.reload("test",{});
                }

            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
</script>

</html>